<!-- 
  @name: 新增/修改设备
  @date: 2020.4.2
 -->
<template>
	<view class="content">
		<view class="cardview">
			<view class="item t1">
				<view>设备出厂编码</view>
				<view class="right">
					<input
						placeholder="输入设备出厂编码"
						placeholder-class="phcolor"
						v-model.trim="info.macCode"
					/>
				</view>
			</view>
			<!-- <view class="item">
				<view>设备版本号</view>
				<view class="right">
					<text
						:class="info.macType ? '' : 'choose'"
						@tap="versionSel = true"
						v-text="macTypeName ? macTypeName : '选择设备设备版本号'"></text>
				</view>
			</view> -->
			<view class="item">
				<view>设备型号</view>
				<view class="right">
					<text
						:class="info.macType ? '' : 'choose'"
						@tap="typeSel = true"
						v-text="macTypeName ? macTypeName : '选择设备型号'"
					></text>
				</view>
			</view>
			<view class="item">
				<view>设备开发名称</view>
				<view class="right">
					<input
						v-if="!isSeldevice"
						placeholder="输入设备开发名称"
						placeholder-class="phcolor"
						v-model.trim="info.deviceName"
					/>
					<view v-else  @tap="$navigateTo('./deviceList')">
						<text
							:class="info.deviceName ? '' : 'choose'"
							v-text="info.deviceName ? info.deviceName : '选择设备'"
						></text>
					</view>
				</view>
			</view>
			<view class="item">
				<view>设备开发密钥</view>
				<view class="right " :class="{'border':isFocus}">
					<input
						placeholder="输入设备开发密钥"
						placeholder-class="phcolor"
						v-model.trim="info.deviceSecret"
						@focus="isFocus=true"
						@blur="isFocus=false"
					/>
					<view class="sel-wrap" v-if="isFocus">
						<view v-for="(item,index) in deviceSecrets" :key="index" @tap="info.deviceSecret = item">{{ item }}</view>
					</view> 
				</view>
			</view>
			<view class="item">
				<view>流量卡号</view>
				<view class="right">
					<input
						type="digit"
						placeholder="输入流量卡号"
						placeholder-class="phcolor"
						v-model.trim="info.iotCardNo"
					/>
				</view>
			</view>
			<view class="item3">
				<view>二维码编号</view>
				<view class="right3">
					<input
						placeholder="输入二维码编号"
						placeholder-class="phcolor"
						v-model.trim="info.originalDeviceCode"
					/>
					<image
						class="scan"
						src="../../static/images/scan.png"
						mode="aspectFill"
						@tap="scanCode"
					></image>
				</view>
			</view>
		</view>

		<view class="cardview c2">
			<view class="title t1">
				<view class="icon i1"></view>
				<view class="text">温控装置</view>
			</view>
			<view class="btnview">
				<view
					class="btn"
					v-for="(item, index) in deviceTypeList"
					:key="index"
					:class="info.deviceType === item.dictValue ? 'sl' : ''"
					@tap="deviceTypeChe(item, index)"
				>
					{{ item.dictName }}
				</view>
			</view>
			<view class="title">
				<view class="icon i2"></view>
				<view class="text">显示屏</view>
				<view class="tip">（前两项可同时选择）</view>
			</view>
			<view class="btnview">
				<view class="btn" :class="info.isBreakOne === 1 ? 'sl' : ''" @tap="screenType(1)">
					断码屏1
				</view>
				<view class="btn" :class="info.isBreakTwo === 1 ? 'sl' : ''" @tap="screenType(2)">
					断码屏2
				</view>
				<view
					class="btn"
					:class="info.isColorScreen === 1 ? 'sl' : ''"
					@tap="screenType(3)"
				>
					彩屏
				</view>
			</view>
			<view class="title">
				<view class="icon i3"></view>
				<view class="text">加注流量计</view>
			</view>
			<view class="btnview">
				<view
					class="btn"
					v-for="(item, index) in fillTypeList"
					:key="index"
					:class="info.fillType === item.dictValue ? 'sl' : ''"
					@tap="fillTypeChe(item, index)"
				>
					{{ item.dictName }}
				</view>
			</view>
			<view class="title">
				<view class="icon i4"></view>
				<view class="text">压力传感器</view>
			</view>
			<view class="btnview">
				<view
					class="btn"
					:class="info.hasPressure === 1 ? 'sl' : ''"
					@tap="info.hasPressure = 1"
				>
					有
				</view>
				<view
					class="btn"
					:class="info.hasPressure === 0 ? 'sl' : ''"
					@tap="info.hasPressure = 0"
				>
					无
				</view>
			</view>
			<view class="title">
				<view class="icon i5"></view>
				<view class="text">液位传感器</view>
			</view>
			<view class="btnview">
				<view
					class="btn"
					:class="info.hasSensor === 1 ? 'sl' : ''"
					@tap="info.hasSensor = 1"
				>
					电压型
				</view>
				<view
					class="btn"
					:class="info.hasSensor === 2 ? 'sl' : ''"
					@tap="info.hasSensor = 2"
				>
					电流型
				</view>
				<view
					class="btn"
					:class="info.hasSensor === 0 ? 'sl' : ''"
					@tap="info.hasSensor = 0"
				>
					无
				</view>
			</view>
			<view class="title">
				<view class="icon i6"></view>
				<view class="text">灯光</view>
			</view>
			<view class="btnview">
				<view
					class="btn"
					:class="info.hasAdvert === 1 ? 'sl' : ''"
					@tap="info.hasAdvert = 1"
				>
					有
				</view>
				<view
					class="btn"
					:class="info.hasAdvert === 0 ? 'sl' : ''"
					@tap="info.hasAdvert = 0"
				>
					无
				</view>
			</view>
			<view class="title">
				<view class="icon i7"></view>
				<view class="text">键盘</view>
			</view>
			<view class="btnview bn">
				<view
					class="btn"
					:class="info.hasKeyboard === 1 ? 'sl' : ''"
					@tap="info.hasKeyboard = 1"
				>
					有
				</view>
				<view
					class="btn"
					:class="info.hasKeyboard === 0 ? 'sl' : ''"
					@tap="info.hasKeyboard = 0"
				>
					无
				</view>
			</view>

			<view class="title">
				<view class="icon i7"></view>
				<view class="text">读卡器</view>
			</view>
			<view class="btnview bn">
				<view class="btn" :class="info.hasCard === 1 ? 'sl' : ''" @tap="info.hasCard = 1">
					有
				</view>
				<view class="btn" :class="info.hasCard === 0 ? 'sl' : ''" @tap="info.hasCard = 0">
					无
				</view>
			</view>
		</view>

		<view class="cardview">
			<view class="item t1">
				<view>泵停压力值</view>
				<view class="right">
					<input
						type="digit"
						placeholder="输入泵停压力值"
						placeholder-class="phcolor"
						v-model.trim="info.pumpPower"
					/>
				</view>
			</view>
			<view class="item">
				<view>储罐总容量(吨)</view>
				<view class="right">
					<input
						type="digit"
						placeholder="输入储罐总容量"
						placeholder-class="phcolor"
						v-model.trim="info.totalCapacity"
					/>
				</view>
			</view>
			<view class="item">
				<view>液位总高度(cm)</view>
				<view class="right">
					<input
						type="digit"
						placeholder-class="phcolor"
						v-model.trim="info.totalHeight"
						:placeholder="info.hasSensor === 1 ? '输入液位总高度' : '选填'"
					/>
				</view>
			</view>
			<!-- <view class="item">
				<view>液位变化值范围(cm)</view>
				<view class="right">
					<input
						type="digit"
						placeholder-class="phcolor"
						v-model.trim="info.heightDelta"
					/>
				</view>
			</view> -->
			<view class="item">
				<view>设备待机页面</view>
				<view class="right" @tap="standbyPageSel = true">
					<text :class="info.backchoice !== '' ? '' : 'choose'">
						{{
							info.backchoice !== ''
								? info.backchoice === 0
									? '普通'
									: '加油站式'
								: '选择设备待机页面'
						}}
					</text>
				</view>
			</view>
			<view class="item">
				<view>安装人员姓名</view>
				<view class="right">
					<text
						:class="info.staffName ? '' : 'choose'"
						v-text="info.staffName ? info.staffName : '选择安装人员'"
						@tap="personSel = true"
					></text>
				</view>
			</view>
			<view class="item">
				<view>
					上传设备照片
					<text class="tip">（不超过5张）</text>
				</view>
			</view>
			<view class="item2">
				<view class="img" v-for="(item, index) in picList" :key="index">
					<image class="i" :src="item"></image>
					<view class="c" @tap="reduPic(item, index)"></view>
				</view>
				<view class="img up" @tap="choosePic"><view class="icon"></view></view>
			</view>
			<template v-if="!isEdit">
				<view class="notice">注意：流量卡号和电路板号必须拍到！</view>
				<view class="notice">注意：流量卡号和电路板号必须拍到！</view>
				<view class="notice">注意：流量卡号和电路板号必须拍到！</view>
			</template>
		</view>

		<!-- 选择区 -->
		<view
			class="_popup"
			v-show="typeSel || personSel || versionSel || standbyPageSel"
			@tap="
				typeSel = false;
				personSel = false;
			"
		></view>
		<!-- 选择设备型号 -->
		<view class="select" :class="typeSel ? 'h1' : 'h2'">
			<view class="title">选择设备型号</view>
			<view class="list">
				<view class="item" v-for="(item, index) in typeList" :key="item.dictValue">
					<text class="text">{{ item.dictName }}</text>
					<view
						:class="info.macType === item.dictValue ? 'icon-1' : 'icon-2'"
						@tap="typeChe(item, index)"
					></view>
				</view>
			</view>
		</view>
		<!-- 设备版本号选择 -->
		<view class="select" :class="versionSel ? 'h1' : 'h2'">
			<view class="title">选择设备版本号</view>
			<view class="list">
				<view
					class="item"
					v-for="(item, index) in deviceVersionCodeList"
					:key="item.dictValue"
				>
					<text class="text">{{ item.dictName }}</text>
					<view
						:class="info.macType === item.dictValue ? 'icon-1' : 'icon-2'"
						@tap="versionChe(item, index)"
					></view>
				</view>
			</view>
		</view>
		<!-- 选择安装人员 -->
		<view class="select" :class="personSel ? 'h1' : 'h2'">
			<view class="title">选择安装人员</view>
			<view class="list">
				<view
					class="item"
					v-for="(item, index) in personList"
					:key="item.staffId"
					@tap="personChe(item, index)"
				>
					<text class="text">{{ item.staffName }}</text>
					<view :class="info.staffName === item.staffName ? 'icon-1' : 'icon-2'"></view>
				</view>
			</view>
		</view>

		<!-- 选择设备待机页面 -->
		<view class="select" :class="standbyPageSel ? 'h1' : 'h2'">
			<view class="title">选择设备待机页面</view>
			<view class="list">
				<view
					class="item"
					v-for="(item, index) in standbyPages"
					:key="item.backchoice"
					@tap="standbyPageChoose(item, index)"
				>
					<text class="text">{{ item.text }}</text>
					<view :class="info.backchoice === item.backchoice ? 'icon-1' : 'icon-2'"></view>
				</view>
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="bottom_blank"></view>
		<view class="bottom_view"><button class="btn_submit" @tap="submit">保存</button></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			info: {
				macCode: 'ST',
				macType: '',
				deviceType: '',
				fillType: '',
				isBreakOne: 0,
				isBreakTwo: 0,
				isColorScreen: 0,
				hasPressure: 1,
				hasSensor: 0,
				hasKeyboard: 1,
				hasCard: 1,
				hasAdvert: 0,
				staffName: '',
				deviceSecret: 'a1XQcH9ErF5',
				heightDelta: 1, //液位变化值范围
				originalDeviceCode: '', // 设备二维码序号
				versionCode: '', // 设备版本号
				backchoice: ''
			},
			macTypeName: '',
			picList: [], //设备图片数组
			typeSel: false, //是否进行型号选择
			typeList: [], //类型数组
			personSel: false, //是否进行安装人员选择
			personList: [], //安装人员数组
			fillTypeList: [], //加注流量计选项列表
			deviceTypeList: [], //温控装置选项列表
			isEdit: false, //是否为编辑
			deviceVersionCodeList: '', // 设备版本号数组
			versionSel: false, // 是否进行设备版本号选择
			standbyPageSel: false, // 是否进行设备待机页面选择
			standbyPages: [{ backchoice: 0, text: '普通' }, { backchoice: 1, text: '加注站式' }],
			deviceSecrets:['a1Jwxk5pq1R','a1XQcH9ErF5','a1dJbBAWvXR','a1bRacSeQfb','a1jIUdNkblT'],
			isFocus: false,
			isSeldevice: false,
		};
	},
	watch:{
		'info.macType':function(val) {
			this.isSeldevice = !['MacType1','MacType2','MacType3'].some(item => item === val);
		}
	},
	onLoad(e) {
		this.isEdit = e.edit ? true : false;
		if (this.isEdit) {
			this.getInfo();
			uni.setNavigationBarTitle({
				title:'编辑设备'
			})
		};
		this.getTypeList();
		this.getPersonList();
		this.getDeviceType();
		this.getFillType(); 
		uni.$on('choseDevice',(device)=>{
			console.log('device',device);
			this.info.deviceName = device.deviceName;
			this.info.deviceSecret = device.deviceSecret;
			this.info.macVersion = device.nowVersion;
		});
	},
	onShow() {
		if (this.$store.state.reLogin) {
			this.$store.commit('hasLogin');
			uni.navigateBack({ delta: 1 });
		}
		this.$nextTick(function() {
			console.log(getApp().globalData.extraData);
			if (getApp().globalData.extraData) {
				this.info.originalDeviceCode =
					getApp().globalData.extraData.originalDeviceCode || '';
				getApp().globalData.extraData = '';
			}
		});
	},
	onUnload() {
		uni.$off('choseDevice');
	},
	methods: {
		// 扫描二维码获取编号
		scanCode() {
			uni.navigateToMiniProgram({
				appId: 'wx931075a419a0491b',
				path: 'pages/scan/scan?id=123',
				extraData: {
					data1: 'test'
				},
				envVersion: process.env.NODE_ENV === 'development' ? 'trial' : 'release',
				success(res) {
					// 打开成功
				}
			});
		},
		//删除图片
		reduPic(item, index) {
			this.picList.splice(index, 1);
		},
		//编辑时获取信息
		getInfo() {
			this.info = JSON.parse(this.$store.state.tmpData);
			this.picList = this.info.devicePhoto.split(',');
			this.$store.commit('setTmpData', '');
		},
		//选择加注流量计
		fillTypeChe(item, index) {
			if (this.info.fillType === item.dictValue) {
				this.info.fillType = '';
			} else {
				this.info.fillType = item.dictValue;
			}
		},
		//获取加注流量计选项
		getFillType() {
			this.$http({
				url: this.$api.userUrl + 'getdictlist',
				data: {
					dictKey: 'FillType'
				}
			}).then(res => {
				this.fillTypeList = [];
				this.fillTypeList = this.fillTypeList.concat(res);
				if (this.isEdit) {
					let index = this.fillTypeList.findIndex(
						item => item.dictName === this.info.fillType
					);
					if (index > -1) this.info.fillType = this.fillTypeList[index].dictValue;
				}
			});
		},
		//选择温控装置
		deviceTypeChe(item, index) {
			if (this.info.deviceType === item.dictValue) {
				this.info.deviceType = '';
			} else {
				this.info.deviceType = item.dictValue;
			}
		},
		//获取温控装置选项
		getDeviceType() {
			this.$http({
				url: this.$api.userUrl + 'getdictlist',
				data: {
					dictKey: 'DeviceType'
				}
			}).then(res => {
				this.deviceTypeList = [];
				this.deviceTypeList = this.deviceTypeList.concat(res);
				if (this.isEdit) {
					let index = this.deviceTypeList.findIndex(
						item => item.dictName === this.info.deviceType
					);
					if (index > -1) this.info.deviceType = this.deviceTypeList[index].dictValue;
				}
			});
		},
		//选择设备类型
		typeChe(item, index) {
			this.typeSel = false;
			this.info.macType = item.dictValue;
			this.macTypeName = item.dictName;
		},
		//获取设备类型
		getTypeList() {
			this.$http({
				url: this.$api.userUrl + 'getdictlist',
				data: {
					dictKey: 'MacType'
				}
			}).then(res => {
				this.typeList = [];
				this.typeList = this.typeList.concat(res);
				if (this.isEdit) {
					let index = this.typeList.findIndex(
						item => item.dictName === this.info.macType
					);
					if (index > -1) {
						this.macTypeName = this.typeList[index].dictName;
						this.info.macType = this.typeList[index].dictValue;
					}
				}
			});
		},
		// 选择设备版本号
		versionChe(item, index) {
			// this.versionSel = false;
			// this.info.versionCode = item.
		},
		//选择安装人员
		personChe(item, index) {
			this.personSel = false;
			this.info.staffName = item.staffName;
		},
		// 选择设备待机页面
		standbyPageChoose(item) {
			this.standbyPageSel = false;
			this.info.backchoice = item.backchoice;
		},
		//获取安装人员列表
		getPersonList() {
			this.$http({
				url: this.$api.factoryUrl + 'getfactorystaffpage'
			}).then(res => {
				this.personList = [];
				this.personList = this.personList.concat(res);
			});
		},
		//选择屏幕
		screenType(code) {
			switch (code) {
				case 1:
					this.info.isColorScreen = 0;
					let one = this.info.isBreakOne;
					this.info.isBreakOne = one === 1 ? 0 : 1;
					break;
				case 2:
					this.info.isColorScreen = 0;
					let two = this.info.isBreakTwo;
					this.info.isBreakTwo = two === 1 ? 0 : 1;
					break;
				case 3:
					this.info.isBreakOne = 0;
					this.info.isBreakTwo = 0;
					let color = this.info.isColorScreen;
					this.info.isColorScreen = color === 1 ? 0 : 1;
					break;
			}
		},
		//选择图片
		choosePic() {
			if (this.picList.length >= 5) {
				return;
			}
			uni.chooseImage({
				count: 5 - this.picList.length, //最多选择个数
				success: data => {
					let arr = data.tempFilePaths;
					arr.forEach(path => {
						this.$http({
							upload: true,
							filePath: path
						}).then(res => {
							this.picList.push(res);
						});
					});
				}
			});
		},
		//提交数据
		submit2() {
			  
			let data = {
				action: 0,
				macCode: this.info.macCode,
				macType: this.info.macType,
				deviceName: this.info.deviceName,
				deviceSecret: this.info.deviceSecret,
				iotCardNo: this.info.iotCardNo,
				deviceType: this.info.deviceType,
				isColorScreen: this.info.isColorScreen,
				isBreakOne: this.info.isBreakOne,
				isBreakTwo: this.info.isBreakTwo,
				hasKeyboard: this.info.hasKeyboard,
				hasCard: this.info.hasCard,
				hasAdvert: this.info.hasAdvert,
				fillType: this.info.fillType,
				hasPressure: this.info.hasPressure,
				hasSensor: this.info.hasSensor,
				pumpPower: parseFloat(this.info.pumpPower),
				totalCapacity: this.info.totalCapacity ? parseFloat(this.info.totalCapacity) : '',
				totalHeight: this.info.totalHeight ? parseFloat(this.info.totalHeight) : '',
				staffName: this.info.staffName,
				devicePhoto: this.$arrToStr(this.picList),
				originalDeviceCode: this.info.originalDeviceCode,
				backchoice: this.info.backchoice
			};
			if (this.isEdit) {
				data.machineId = this.info.machineId;
			}
			this.$http({
				url: this.$api.factoryUrl + 'addorupdatedevice',
				data: data
			}).then(res => {
				this.$successToast('保存成功！');
				setTimeout(() => {
					if (this.isEdit) {
						uni.$emit('device_changeCode', this.info.macCode);
					} else {
						uni.$emit('device_addDevice', {});
					}
				}, this.$tmp.TIME_SUC);
				this.$sucBack();
			});
		},
		//提交数据-验证
		submit() {
			if (!this.info.macCode) {
				this.$showToast('请输入设备出厂编码！');
				return;
			}
			if (!this.info.macType) {
				this.$showToast('请选择设备型号！');
				return;
			}
			if (!this.info.deviceName) {
				this.$showToast('请输入设备开发名称！');
				return;
			}
			if (!this.info.deviceSecret) {
				this.$showToast('请输入开发秘钥！');
				return;
			}
			if (!this.info.iotCardNo) {
				this.$showToast('请输入流量卡号！');
				return;
			}

			if (!this.info.originalDeviceCode) {
				return this.$showToast('请输入二维码编号');
			}

			if (!this.info.pumpPower || this.info.pumpPower < 100) {
				this.$showToast('泵停压力值不得小于100！');
				return;
			}
			if (!this.info.totalCapacity || this.info.totalCapacity <= 0) {
				this.$showToast('请输入储罐总容量！');
				return;
			}
			if (
				this.info.hasSensor === 1 &&
				(!this.info.totalHeight || this.info.totalHeight <= 0)
			) {
				this.$showToast('请输入液位总高度！');
				return;
			}
			if (!this.info.staffName) {
				this.$showToast('请选择安装人员！');
				return;
			}
			if (!this.info.backchoice && this.info.backchoice !== 0) {
				this.$showToast('请选择设备待机页面！');
				return;
			}

			if (this.picList.length === 0) {
				this.$showToast('请选择设备图片！');
				return;
			}
			this.submit2();
		}
	}
};
</script>

<style lang="scss">
.border {
	outline: 1rpx solid #dddddd;
}

.content {
	align-items: center;
}
.cardview.c2 {
	padding-right: 0;
}
.cardview {
	width: 730rpx;
	padding: 40rpx 30rpx;
	margin-top: $spacing-col;
	background-color: $color-white;
	border-radius: $border-radius-bm;
	.item.t1 {
		margin-top: 0;
	}
	.item {
		width: 100%;
		margin-top: 50rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		.right {
			flex: 1;
			text-align: end;
			margin-left: 30rpx;
			position: relative;

			input {
				line-height: 80rpx;
				height: 80rpx;
				padding: 0 30rpx;
			}
			.sel-wrap {
				position: absolute;
				left: 0;
				top: 79rpx;
				background-color: #ffffff;
				z-index: 999;
				width: 100%;
				box-shadow: 0 1rpx 10rpx 1rpx #dddddd;

				> view {
					height: 80rpx;
					line-height: 80rpx;
					padding-left: 30rpx;
					text-align: left;
				}
				> view:not(:last-child) {
					border-bottom: 1rpx solid #e7e7e7;
				}
			}
		}
		.choose {
			color: $color-primary;
		}
		.tip {
			font-size: 24rpx;
			color: $color-grey;
		}
	}
	.item2 {
		width: 100%;
		margin-top: 30rpx;
		.img {
			display: inline-block;
			position: relative;
			width: 130rpx;
			height: 130rpx;
			margin-top: 10rpx;
			margin-right: 20rpx;
			.i {
				width: 100%;
				height: 100%;
			}
			.c {
				position: absolute;
				top: -3rpx;
				right: -3rpx;
				width: 26rpx;
				height: 26rpx;
				background-image: url('http://img.etubang.com/group1/M00/00/41/rBCky15l7FyAcnkVAAAEiSf4WeE606.png');
			}
		}
		.img.up {
			background-color: $color-bg;
			.icon {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				width: 36rpx;
				height: 61rpx;
				background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16L4jGAEC_iAAALKmFTzp8282.png');
			}
		}
	}
	.notice {
		color: red;
		font-size: 26rpx;
		letter-spacing: 4rpx;
	}
	.item3 {
		display: flex;
		justify-content: space-between;
		align-content: center;
		margin-top: 50rpx;

		.right3 {
			display: flex;
			align-items: center;
			text-align: right;
		}

		.scan {
			width: 44rpx;
			height: 44rpx;
			flex-shrink: 0;
			margin-left: 20rpx;
		}
	}

	.title.t1 {
		margin-top: 0;
	}
	.title {
		width: 100%;
		margin-top: 40rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		.text {
			margin-left: 20rpx;
		}
		.tip {
			font-size: 24rpx;
			color: $color-grey;
		}
		.icon {
			width: 30rpx;
			height: 30rpx;
		}
		.icon.i1 {
			background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16HCeGAZA_zAAADsLiEu8o673.png');
		}
		.icon.i2 {
			background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16HCfqAM7FHAAAC_20S5Zg317.png');
		}
		.icon.i3 {
			background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16HCh6AV5fLAAAEJzgfZbU762.png');
		}
		.icon.i4 {
			background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16HCh6AV5fLAAAEJzgfZbU762.png');
		}
		.icon.i5 {
			background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16HCkCASZUpAAAD8KX-qiY913.png');
		}
		.icon.i6 {
			background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16QJNiANbfEAAAEn2zkeoU370.png');
		}
		.icon.i7 {
			background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16QJOSAc8mYAAAE-GZlXFM477.png');
		}
	}
	.btnview.bn {
		padding-bottom: 0;
		border-bottom: none;
	}
	.btnview {
		width: 650rpx;
		margin-left: 50rpx;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #e5e5e5;
		.btn {
			display: inline-block;
			width: 150rpx;
			height: 54rpx;
			line-height: 54rpx;
			text-align: center;
			margin-top: 20rpx;
			margin-right: 35rpx;
			font-size: 24rpx;
			color: $color-primary;
			border-radius: 26rpx;
			background-color: #eee;
		}
		.btn.sl {
			color: $color-white;
			background-color: $color-primary;
		}
	}
}

/* 选择区 */
.select.h1 {
	height: calc(100vh - 400rpx);
}
.select.h2 {
	height: 0;
}
.select {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	width: 750rpx;
	z-index: $z-index-popup-info;
	background-color: $color-white;
	border-radius: 20rpx 20rpx 0 0;
	transition: height 0.3s;
	.title {
		width: 100%;
		height: 90rpx;
		padding-top: 50rpx;
		padding-bottom: 15rpx;
		text-align: center;
		font-size: 32rpx;
		color: $color-primary;
	}
	.list {
		width: 100%;
		height: calc(100vh - 490rpx);
		padding: 0 60rpx;
		padding-bottom: 50rpx;
		overflow-y: scroll;
	}
	.item {
		width: 100%;
		margin-top: 65rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		.text {
			flex: 1;
		}
	}
	.icon-1 {
		width: 40rpx;
		height: 40rpx;
		background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16L6_CAC-MBAAAFMha2HcI447.png');
	}
	.icon-2 {
		width: 38rpx;
		height: 38rpx;
		background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16L692Ac36SAAAD0w0_KrE071.png');
	}
}
</style>
